<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">


    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <!--- 引入的phpMyAdmin样式 -->
    <link href="css/print.css" rel="stylesheet">
    <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet">

    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
</head>

<body class="gray-bg">
    <div class="col-sm-13">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>数据列表</h5>
                <div class="ibox-tools">
                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                    <i class="fa fa-wrench"></i></a>
                    <a class="close-link"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="ibox-content">
                <a id="user-index" class="btn btn-info dropdown-toggle J_menuItem empty_table">清空表</a>
                <a id="user-index" class="btn btn-info dropdown-toggle insert_table">添加数据</a>
                <a href="?r=fields/field_structure" id="user-index" class="btn btn-info dropdown-toggle">表结构</a>
                <a id="user-index" class="btn btn-info dropdown-toggle dbname-cha">新建查询</a>
                <a href="" class="btn btn-info dropdown-toggle">刷新</a>
                <a class="btn btn-info dropdown-toggle J_menuItem" href="javascript:" data-toggle="modal" data-target="#exampleModal" data-whatever="">导出</a>
                <a id="user-index" class="btn btn-info dropdown-toggle begin-object">开启事物</a>

            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel"></h4>
              </div>
              <div class="modal-body">
                <form>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">导出表:<span id="table_name"><?= $table?></span></label>
                  </div>
                  <div class="form-group">
                    <label for="recipient-name" class="control-label">格式:</label>
                    <select name="type" id="file">
                        <option value="sql">Sql脚本文件（*.sql）</option>
                        <option value="work">Work文档（*.doc）</option>
                    </select>
                  </div>
                  
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <a href="?r=export/sql" class="btn btn-primary" id="export">导出</a>
              </div>
            </div>
          </div>
        </div>
<style type="text/css">
    #dbname tr td i{
        cursor: pointer;
        margin: 5px;
    }
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0;
    }
    #fullbg {
    background-color:gray;
    left:0;
    opacity:0.5;
    position:absolute;
    top:0;
    z-index:3;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    }
    #dialog {
    background-color:#fff;
    border:5px solid rgba(0,0,0, 0.4);
    height:400px;
    left:30%;
    margin:-200px 0 0 -200px;
    padding:1px;
    position:fixed !important; /* 浮动对话框 */
    position:absolute;
    top:50%;
    width:800px;
    z-index:5;
    border-radius:5px;
    display:none;
    }
    #dialog p {
    margin:0 0 12px;
    height:24px;
    line-height:24px;
    background:#CCCCCC;
    }
    #dialog p.close {
    text-align:right;
    padding-right:10px;
    }
    #dialog p.close a {
    color:red;
    text-decoration:none;
    } 
    .content{
        width: 780px;
        height: 170px;
        border: 1px solid red;
        overflow:scroll; 
    }
    #fullbgs {
    background-color:gray;
    left:0;
    opacity:0.5;
    position:absolute;
    top:0;
    z-index:3;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    }
    #dialogs {
    background-color:#fff;
    border:5px solid rgba(0,0,0, 0.4);
    height:400px;
    left:40%;
    margin:-200px 0 0 -200px;
    padding:1px;
    position:fixed !important; /* 浮动对话框 */
    position:absolute;
    top:50%;
    width:400px;
    z-index:5;
    border-radius:5px;
    display:none;
    overflow:scroll; 
    }
    #dialogs p {
    margin:0 0 12px;
    height:24px;
    line-height:24px;
    background:#CCCCCC;
    }
    #dialogs p.closes {
    text-align:right;
    padding-right:10px;
    }
    #dialogs p.closes a {
    color:red;
    text-decoration:none;
    } 
    .ibox-show{
        overflow:scroll; 
    }
</style>
<div class="ibox-content ibox-show">
    <table class="table">
        <thead id="fields">
            <tr>
                <th width="25"></th>
                <?php foreach($list as $k=>$v){?>
                <th width="120"><?=$v['Field']?></th>
                <?php }?>
                <th width="120">操作</th>
            </tr>
        </thead>
        <tbody id="dbname">
        <?php foreach($data as $key => $val): ?>
            <tr>
                <td><input type="checkbox" value="" name=""></td>
                <?php foreach($val as $keys=>$value){?>
                    <td><?php echo $value?></td>
                <?php }?>
                <td>
                    <a><i class="glyphicon glyphicon-trash tablenames one-delete"></i></a>
                    <a><i class="glyphicon glyphicon-list"></i></a>
                </td>
            </tr>
        <?php endforeach;?>
        </tbody>
    </table>
    <center>
        <a href="?r=tables/show_table&table=<?=$table?>&p=1" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">首页</a>
        <a href="?r=tables/show_table&table=<?=$table?>&p=<?=$shang?>" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">上一页</a>
        <a href="?r=tables/show_table&table=<?=$table?>&p=<?=$xia?>" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">下一页</a>
        <a href="?r=tables/show_table&table=<?=$table?>&p=<?=$ye_shu?>" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">尾页</a>
    <span style="font-size: 18px">第<?=$p?>页/共<?=$ye_shu?>页</span>
    </center>
</div>
<!-- 遮罩层 -->
<div id="main">
    <div id="fullbg"></div>
    <div id="dialog">
        <p class="close"><a href="javascript:void(0);" onclick="closeBg();">关闭</a></p>
        <div style="margin-left: 10px;">
            <br>查询sql<br><br>
                <textarea id="dbname-sql" cols="145" rows="5"></textarea><br><br>
                <a  href="javascript:void(0)" class="dbname-xun" title="查询">查询</a>
        </div>
        <div class="content">
            
        </div>
    </div>
</div>
<!-- 遮罩层二 -->
<div id="mains">
    <div id="fullbgs"></div>
    <div id="dialogs">
        <p class="closes"><a href="javascript:void(0);" onclick="closeBgs();">关闭</a></p>
        <div style="margin-left: 10px;">
            <form action="?r=tables/insertone" method="post">
            <?php foreach($list as $qq=>$ww){?>
                <?php if($qq!=0){?>
                    <?=$ww['Field']?>&nbsp;：<input type="text" name="list[]"><br><br>
                <?php }?>            
            <?php }?>
            <!-- <a  href="javascript:void(0)" class="insert-in" title="添加">添加</a> -->
            <input type="submit" value="添加">
            </form>
        </div>
    </div>
</div>     
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>
    <script src="js/demo/peity-demo.js"></script>
    <!-- Peity -->
    <script src="js/plugins/peity/jquery.peity.min.js"></script>
    <script src="js/paging.js"></script>
    <script src="js/hm.js"></script>
</body>
</html>
<script>
    //查询sql
    $('.dbname-cha').click(function(){
        var bh = $("body").height();
        var bw = $("body").width();
        $("#fullbg").css({
            height:bh,
            width:bw,
            display:"block"
        });
        $("#dialog").show();
        $('.dbname-xun').click(function(){
            var sql = $("#dbname-sql").val();
            var _this = $('.content');
            $.ajax({
                type:'post',
                url:'?r=dbs/selectsql',
                data:{'sql':sql},
                success:function(mas){
                    _this.empty();
                    _this.html(mas);
                }
            })
        })
    })
    //关闭灰色 jQuery 遮罩
    function closeBg(){
        $("#fullbg,#dialog").hide();
    }
    //添加数据
    $('.insert_table').click(function(){
        var bh = $("body").height();
        var bw = $("body").width();
        $("#fullbgs").css({
            height:bh,
            width:bw,
            display:"block"
        });
        $("#dialogs").show();
        $('.insert-in').click(function(){
            var sql = $("#dbname-sql").val();
            var _this = $('.content');
            $.ajax({
                type:'post',
                url:'?r=dbs/selectsql',
                data:{'sql':sql},
                success:function(mas){
                    _this.empty();
                    _this.html(mas);
                }
            })
        })
    })
    //关闭灰色 jQuery 遮罩
    function closeBgs(){
        $("#fullbgs,#dialogs").hide();
    }
    //清空表
    $('.empty_table').click(function(){
        if(confirm('是否清空数据')){
            $.ajax({
                url:'?r=tables/empty_table',
                success:function(mas){
                   if(mas==0){
                        alert('清空成功');
                   }else{
                    alert('清空失败');
                   }
                }
            })
        }
    })
    //删除
    $('.one-delete').click(function(){
        var id = $(this).parent().parent().parent().find('td:eq(1)').html();
        var field = $('#fields tr th').parent().find('th:eq(1)').html();
        var _this = $(this);
        $.ajax({
            type:'post',
            url:'?r=tables/deleteone',
            data:{'id':id,'field':field},
            success:function(mas){
                if(mas==1){
                    _this.parent().parent().parent().empty();
                    alert('删除成功');
                }else{
                    alert('删除失败');
                }
            }
        })
    })
    //开启事物
    $('.begin-object').click(function(){
        var _this = $(this);
        $.ajax({
            url:'?r=tables/object',
            success:function(mas){
                if(mas==0){
                    _this.parent().append('<a id="user-index" class="btn btn-info dropdown-toggle commit-object">确定事物</a>');
                    _this.parent().append('<a id="user-index" class="btn btn-info dropdown-toggle collback-object">事物回滚</a>');
                    _this.remove();
                    alert('开启成功');
                }
            }
        })
    })
    //确定事物
    $(document).on('click','.commit-object',function(){
        $.ajax({
            uel:'?r=tables/commitobject',
            success:function(mas){
                alert(mas);
            }
        })
    })
    //事物回滚
    $(document).on('click','.rollback-object',function(){
        $.ajax({
            uel:'?r=tables/rollbackobject',
            success:function(mas){
                alert(mas);
            }
        })
    })
    $('#exampleModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget) // Button that triggered the modal
      var recipient = button.data('whatever') // Extract info from data-* attributes
      // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
      // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
      var modal = $(this)
      modal.find('.modal-title').text('导出')
      modal.find(".modal-body input[name='port']").val(recipient)
    })
    // $("#connect").click(function(){
    //     $(".form-group label font").parent().remove();
    //     _table = $("#table_name").html();
    //     _file = $("#file").val()
    //     alert(_table)
    //     alert(_file)
    //     $.ajax({
    //         type:"post",
    //         url:"?r=export/"+_file,
    //         data:{
    //             table:_table,
    //         },
    //         // dataType:'json',
    //         success:function($data){
    //             // alert($data)
    //             // window.open('?r=export/'+_file);
    //         }
    //     })

    // });
    $("#file").change(function(){
        _this = $(this);
        _file = _this.val();
        // alert(_file)
        $("#export").attr('href','?r=export/'+_file);
    }) 
</script>
<script>
    var content = '';
    $(document).on('click','#dbname tr td',function(){
        _this = $(this);
        $a = _this.html();
        $b = _this.parent().find('td:eq(1)').html();
        $c = _this.parent().find('td:eq(0)').html();
        $f = _this.parent().find('td:last').html();
        if($a == $b){
            return false;
        }
        if($a == $c){
            check = $c = _this.parent().find('td:eq(0) input');
            if(check.checked){
                _this.parent().find('td:eq(0)').html('<input type="checkbox" name="" value=""/>');
            }else{
                _this.parent().find('td:eq(0)').html('<input type="checkbox" checked name="" value=""/>');
            }
            return false;
        }
        if($a == $f){
            return false;
        }
        content = _this.html();
        // _this.find('span').remove();
        _this.html('<p><input type="text" value="'+content+'"/></p>');
        $("#dbname tr td p").find('input').focus();
        $("#dbname").attr('id','dbnames');

    });
    $(document).on('blur','#dbnames tr td p input',function(){
        _this = $(this);
        var contents = _this.val();
        _id = _this.parent().parent().parent().find('td:eq(1)').html();
        var row = _this.parent().parent().prevAll().length;
        _field = _this.parent().parent().parent().parent().parent().find('thead tr th:eq('+row+')').html();

        if(content == contents){
            _this.parent().parent().html(content);
            $("#dbnames").attr('id','dbname');
            return false;
        }
        $.ajax({
            type:"post",
            url:"?r=fields/operation_table",
            data:{
                content:contents,
                id:_id,
                field:_field
            },
            success:function($data){
                // alert($data);
                _this.parent().parent().html(contents);

            }
        });
        
    })
</script>